<template>
    <van-skeleton title :row="3" v-if="status"/>
    <div v-else>
        <van-nav-bar title="首页商城" filex />
        <div style="height: 45px;"></div>



        <van-search v-model="value" show-action label="地址" placeholder="请输入搜索关键词" @search="onSearch"></van-search>



        <van-tabs v-model:active="active" animated>
            <van-tab title="游戏商城"></van-tab>
            <van-tab title="衣服甩卖"></van-tab>
            <van-tab title="特价商品"></van-tab>
            <van-tab title="零食小屋"></van-tab>
            <van-tab title="名牌衣服"></van-tab>
            <van-tab title="包治百病"></van-tab>
        </van-tabs>

<swiper></swiper>
      

<van-grid :column-num="4">
  <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
</van-grid>

<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
/>
<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
/>
<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
/>
<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
/>
<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
/>
    </div>
</template>

<script setup>
import {ref} from 'vue'
import swiper from '@/components/swiper.vue'
let status=ref(true)
setTimeout(() => {
    status.value=false
}, 2000);
import {catitemsApi} from '@/api/api'
let catitemsApiData=ref([])
catitemsApi().then(res=>{
    console.log('宫格',res);
    catitemsApiData.value=res.data.message
})
</script>

<style lang="scss" scoped></style>